<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.sll" />
          </div>
          <template slot="footer">
            今日受理量：
            <span>{{ todaySll }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.bjl" />
          </div>
          <template slot="footer">
            今日办结量：
            <span>{{ todayBjl }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.isll" />
          </div>
          <template slot="footer">
            用户今日受理量：
            <span>{{ todayISll }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.ibjl" />
          </div>
          <template slot="footer">
            用户今日办结量：
            <span>{{ todayIBjl }}</span>
          </template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>

          <a-tab-pane loading="true" tab="受理监管" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="受理量统计" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="交互监管" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar-multid :dataSource="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="效率监管" key="3">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <line-chart-multid :dataSource="xljgData" :fields="xljgFields" title="平台与部门交互效率统计"></line-chart-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="12"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="存储监管" key="4">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <a-row>
                  <template v-if="diskInfo && diskInfo.length>0">
                    <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
                      <dash-chart-demo :title="item.name" :dataSource="item.restPPT"></dash-chart-demo>
                    </a-col>
                  </template>
                </a-row>
              </a-col>

              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-card
                  title="快速开始 / 便捷导航"
                  style="margin-bottom: 24px"
                  :bordered="false"
                  :body-style="{padding: 0}"
                >
                  <div class="item-group">
                    <a-row>
                      <a-col
                        :class="'more-btn'"
                        :span="10"
                        v-for="(item,index) in registerTypeList"
                        :key=" 'registerType'+index "
                      >
                        <a-button
                          @click="goPage(index)"
                          style="margin-bottom:10px"
                          size="small"
                          type="primary"
                          ghost
                        >{{ item.text }}</a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-row :gutter="12">
      <a-card
        :loading="loading"
        :class="{ 'anty-list-cust':true }"
        :bordered="false"
        :style="{ marginTop: '24px' }"
      >
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group defaultValue="1">
              <a-radio-button value="1">转移登记</a-radio-button>
              <a-radio-button value="2">抵押登记</a-radio-button>
            </a-radio-group>
          </div>

          <a-tab-pane loading="true" tab="业务流程限时监管" key="1">
            <a-table
              :dataSource="dataSource1"
              size="default"
              rowKey="id"
              :columns="columns"
              :pagination="ipagination"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

          <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
            <a-table
              :dataSource="dataSource2"
              size="default"
              rowKey="id"
              :columns="columns2"
              :pagination="ipagination"
            >
              <template slot="flowRate" slot-scope="text, record, index">
                <span style="color: red;">{{ record.flowRate }}分钟</span>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import AreaChartTy from '@/components/chart/AreaChartTy'
import DashChartDemo from '@/components/chart/DashChartDemo'
import BarMultid from '@/components/chart/BarMultid'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import moment from 'dayjs'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const dataCol1 = [{
  title: '业务号',
  align: "center",
  dataIndex: 'reBizCode'
}, {
  title: '权利类型',
  align: "center",
  dataIndex: 'droitType'
}, {
  title: '登记类型',
  align: "center",
  dataIndex: 'registeType'
}, {
  title: '座落',
  align: "center",
  dataIndex: 'beLocated'
}, {
  title: '权利人',
  align: "center",
  dataIndex: 'qlr'
}, {
  title: '义务人',
  align: "center",
  dataIndex: 'ywr'
}, {
  title: '受理人',
  align: "center",
  dataIndex: 'acceptBy'
}, {
  title: '受理时间',
  align: "center",
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: "center",
  dataIndex: 'curNode'
}, {
  title: '办理进度',
  align: "center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];

const dataCol2 = [{
  title: '业务号',
  align: "center",
  dataIndex: 'reBizCode'
}, {
  title: '权利类型',
  align: "center",
  dataIndex: 'droitType'
}, {
  title: '登记类型',
  align: "center",
  dataIndex: 'registeType'
}, {
  title: '座落',
  align: "center",
  dataIndex: 'beLocated'
}, {
  title: '权利人',
  align: "center",
  dataIndex: 'qlr'
}, {
  title: '义务人',
  align: "center",
  dataIndex: 'ywr'
}, {
  title: '受理人',
  align: "center",
  dataIndex: 'acceptBy'
}, {
  title: '发起时间',
  align: "center",
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: "center",
  dataIndex: 'curNode'
}, {
  title: '超时时间',
  align: "center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];

const jhjgData = [
  { type: '房管', '一月': 900, '二月': 1120, '三月': 1380, '四月': 1480, '五月': 1450, '六月': 1100, '七月': 1300, '八月': 900, '九月': 1000, '十月': 1200, '十一月': 600, '十二月': 900 },
  { type: '税务', '一月': 1200, '二月': 1500, '三月': 1980, '四月': 2000, '五月': 1000, '六月': 600, '七月': 900, '八月': 1100, '九月': 1300, '十月': 2000, '十一月': 900, '十二月': 1100 },
  { type: '不动产', '一月': 2000, '二月': 1430, '三月': 1300, '四月': 1400, '五月': 900, '六月': 500, '七月': 600, '八月': 1000, '九月': 600, '十月': 1000, '十一月': 1500, '十二月': 1200 }
]
const jhjgFields = [
  '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月'
]


const xljgData = [
  { type: '一月', "房管": 1.12, "税务": 1.55, "不动产": 1.2 },
  { type: '二月', "房管": 1.65, "税务": 1.32, "不动产": 1.42 },
  { type: '三月', "房管": 1.85, "税务": 1.1, "不动产": 1.5 },

  { type: '四月', "房管": 1.33, "税务": 1.63, "不动产": 1.4 },
  { type: '五月', "房管": 1.63, "税务": 1.8, "不动产": 1.7 },
  { type: '六月', "房管": 1.85, "税务": 1.98, "不动产": 1.8 },

  { type: '七月', "房管": 1.98, "税务": 1.5, "不动产": 1.76 },
  { type: '八月', "房管": 1.48, "税务": 1.2, "不动产": 1.3 },
  { type: '九月', "房管": 1.41, "税务": 1.9, "不动产": 1.6 },

  { type: '十月', "房管": 1.1, "税务": 1.1, "不动产": 1.4 },
  { type: '十一月', "房管": 1.85, "税务": 1.6, "不动产": 1.5 },
  { type: '十二月', "房管": 1.5, "税务": 1.4, "不动产": 1.3 }
]
const xljgFields = ["房管", "税务", "不动产"]
export default {
  name: "Analysis",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    AreaChartTy,
    DashChartDemo,
    BarMultid
  },
  data () {
    return {
      xljgData,
      xljgFields,
      jhjgData,
      jhjgFields,
      loading: true,
      rankList,
      zsll: 0,
      zbjl: 0,
      todaySll: 0,
      todayBjl: 0,
      todayISll: 0,
      todayIBjl: 0,
      registerTypeList: [{
        text: "业务受理"
      }, {
        text: "业务管理"
      }, {
        text: "文件管理"
      }, {
        text: "信息查询"
      }],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      //数据集
      dataSource: [],
      dataSource1: [],
      dataSource2: [],
      url: {
        analysis: "/sps/register/analysis",
        list: "sps/register/virtualList",
        countSll: "sps/register/sllTenDaysCount",
        countBjl: "sps/register/bjlTenDaysCount",
        countISll: 'sps/register/ISllTenDaysCount',
        countIBjl: 'sps/register/IBjlTenDaysCount',
        queryDiskInfo: 'sys/actuator/redis/queryDiskInfo'
      },
      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
      cardCount: {
        sll: 0,
        bjl: 0,
        isll: 0,
        ibjl: 0
      },
      columns: dataCol1,
      columns2: dataCol2,
      diskInfo: []
    }
  },
  methods: {
    goPage (index) {
      if (index == 0) {
        this.$router.push({
          path: '/isps/registerStepForm',
          name: 'isps-registerStepForm',
        });
      } else if (index == 1) {
        this.$router.push({
          path: '/isps/registerList',
          name: 'isps-registerList',
        });

      } else if (index == 2) {
        this.$router.push({
          path: '/isps/fileManage',
          name: 'isps-fileManage',
        });
      } else if (index == 3) {
        this.$router.push({
          path: '/isps/infoSearch',
          name: 'isps-infoSearch',
        });
      }
    },
    loadList (arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      getAction(this.url.list, params).then((res) => {
        console.log("dsdsd", res.result)
        this.dataSource1 = res.result.data1;
        this.dataSource2 = res.result.data2;
        this.ipagination.total = 5;
      });
    },
    getQueryParams () {
      var param = { flowStatus: "-3" };
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    formatRespectiveHoldCert (value) {
      return (value == "1" || eval(value)) ? "是" : "否"
    },
    formatCertFormat (value) {
      if (value == "1") {
        return "单一版"
      } else if (value == "2") {
        return "集成版"
      } else {
        return value;
      }
    },
    getFlowRateNumber (value) {
      return Number(value)
    },
    getFlowPercent (record) {
      if (record.flowStatus == "3") {
        return 100
      } else if (record.flowStatus == "0") {
        return 0
      } else {
        return record.flowRate
      }
    },
    getFlowStatus (status) {
      if (status == "4") {
        return "exception";
      } else if (status == "0") {
        return "normal";
      } else if (status == "3") {
        return "success";
      } else {
        return "active";
      }

    },
    queryCount () {
      getAction(this.url.analysis).then((res) => {
        if (res.success) {
          this.cardCount = res.result
        }
        console.log(res);
      });
    },

    loadDiskInfo () {
      getAction(this.url.queryDiskInfo).then((res) => {
        if (res.success) {
          let one = 0, two = "";
          for (let a in res.result) {
            let tempNum = Number(res.result[a].max)
            if (tempNum > one) {
              one = tempNum
              two = res.result[a].name
            }
          }
          let ontItem = res.result.filter((item) => { return item.name == two })[0]
          ontItem.restPPT = ontItem.restPPT / 10
          this.diskInfo.push(ontItem);

          if (res.result.length > 1) {
            let one2 = 0, two2 = "";
            for (let a in res.result) {
              if (res.result[a].name == two) {
                continue;
              }
              let tempNum = Number(res.result[a].max)
              if (tempNum > one2) {
                one2 = tempNum
                two2 = res.result[a].name
              }
            }
            let one2Item = res.result.filter((item) => { return item.name == two2 })[0]
            one2Item.restPPT = one2Item.restPPT / 10
            this.diskInfo.push(one2Item);
          }

        } else {
          console.log(res.message)
        }
      })
    },
    loadChartData () {
      getAction(this.url.countSll).then((res) => {
        if (res.success) {
          let map = res.result;
          for (var key in map) {
            let dataStr = key;
            let value = map[key];
            let today = moment(new Date()).format('YYYY-MM-DD');
            if (dataStr == today) {
              this.todaySll = map[today];
            }
            this.chartData.sll.push({
              x: dataStr,
              y: value
            });
          }
        }

      }),
        getAction(this.url.countBjl).then((res) => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = moment(new Date()).format('YYYY-MM-DD');
              if (dataStr == today) {
                this.todayBjl = map[today];
              }
              this.chartData.bjl.push({
                x: dataStr,
                y: value
              });
            }
          }
        }),
        getAction(this.url.countISll).then((res) => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = moment(new Date()).format('YYYY-MM-DD');
              if (dataStr == today) {
                this.todayISll = map[today];
              }
              this.chartData.isll.push({
                x: key,
                y: value
              });
            }
          }
        }),
        getAction(this.url.countIBjl).then((res) => {
          if (res.success) {
            let map = res.result;
            for (var key in map) {
              let dataStr = key;
              let value = map[key];
              let today = moment(new Date()).format('YYYY-MM-DD');
              if (dataStr == today) {
                this.todayIBjl = map[today];
              }
              this.chartData.ibjl.push({
                x: key,
                y: value
              });
            }
          }
        })
    }
  },
  created () {
    this.loadDiskInfo()
    this.queryCount();
    this.loadChartData();
    this.loadList(1);
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }
  .width-hidden4 {
    display: none;
  }
}
.list-content-item {
  span {
    line-height: 20px;
  }
}
.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}
.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>